<div class="modal-header">
  <h5 class="modal-title">
    <div>Copy this feedback session to other courses</div>
    <small class="text-secondary">(Select the course(s) you want to copy this feedback session to)</small>
  </h5>
  <button type="button" class="btn-close" (click)="activeModal.dismiss()"></button>
</div>
<div id="copy-course-modal" class="modal-body">
  <div class="row">
    <div class="col-12">
      <div class="form-group">
        <label><b>Name for copied session*</b></label>
        <input id="copy-session-name" type="text" class="form-control" [(ngModel)]="newFeedbackSessionName" [maxlength]="FEEDBACK_SESSION_NAME_MAX_LENGTH"
               required #newSessionName="ngModel">
        <div [hidden]="newSessionName.valid || (newSessionName.pristine && newSessionName.untouched)" class="invalid-field">
            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
            The field "Name for copied session" should not be empty.
        </div>
        <span>{{ FEEDBACK_SESSION_NAME_MAX_LENGTH - newFeedbackSessionName.length }} characters left</span>
      </div>
      <div class="form-check" *ngFor="let course of courseCandidates">
        <label class="form-check-label text-break">
          <input type="checkbox" name="copySessionChooseCourse" class="form-check-input"
                 [checked]="copyToCourseSet.has(course.courseId)" (click)="select(course.courseId)">
          [<span [ngClass]="{ 'text-danger': sessionToCopyCourseId === course.courseId }">{{ course.courseId }}</span>]
          : {{ course.courseName }}
          <span *ngIf="sessionToCopyCourseId === course.courseId" class="text-danger">
            {{ "{Session currently in this course}" }}
          </span>
        </label>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-light" (click)="activeModal.dismiss()">Cancel</button>
  <button id="btn-confirm-copy-course" type="button" class="btn btn-primary" (click)="copy()"
          [disabled]="!newFeedbackSessionName || copyToCourseSet.size < 1">Copy</button>
</div>
